$(function () {
  getAjax();
  getCity();
  getLogin()
  getBack()
});

// 点击返回
function getBack() {
  $(".back").on("click", () => {
    location = "index_wzt.html";
  });
}

// 点击登录
function getLogin() {
  $(".login").on("click", () => {
    location = "user_wzt.html";
  });
}

// 点击地区切换地区
function getCity() {
  $(".city").on("click", () => {
    location = "city_lcz.html";
  });
}

// 点击搜索
// function getSearch() {
//   $(".search").on("click", () => {
//     location = "2.html";
//   });
// }

// 点击list弹出下拉框

// 懒加载
onscroll = lazyLoad

function lazyLoad() {
  let clientHeight = document.documentElement.clientHeight
  let scollTop = document.documentElement.scrollTop || 0
  console.log(clientHeight, scollTop)
  let lazy = document.getElementsByClassName('lazy')
  for (let i = 0; i < lazy.length; i++) {
    let top = getPoint(lazy[i])
    console.log(top)
    if (scollTop + clientHeight > top + 100) {
      lazy[i].src = lazy[i].getAttribute('imgSrc')
      lazy[i].removeAttribute('imgSrc')
      lazy[i].className = ''
    }
  }
}

let getPoint = (obj) => {
  let t = obj.offsetTop
  while ((obj = obj.offsetParent)) {
    t += obj.offsetTop
  }
  return t
}

// 渲染数据
async function getAjax() {
  let res = await axios.get("http://127.0.0.1:3033/ershoufang", {});
  console.log(res);
  let arr = res.data;
  let count = [
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
    "slider1",
    "slider2",
    "slider3",
    "slider4",
    "slider5",
    "slider6",
    "slider7",
    "slider8",
  ];
  // console.log(arr);
  for (let i = 0; i < 3; i++) {
    let ste = `
    <li>
        <div class="nav_list">
        <div class="pic">
            <img src="./img/${count[i]}.jpg" alt="" />
        </div>
        <div class="introduce">
            <ul>
            <li class="title">${arr[i].title}</li>
            <li class="layout">${arr[i].describe}</li>
            <li class="tally"><p>${arr[i].keywords}</p></li>
            <li class="prices">
                <p class="allprice">${arr[i].allprice}</p>
                <p class="price">${arr[i].price}</p>
            </li>
            </ul>
        </div>
        </div>
        </li>
        `;
    // $('#nav').empty()
    $("#nav").append(ste);
  }
  for (let i = 3; i < arr.length; i++) {
    let str = `
    <li>
        <div class="nav_list">
        <div class="pic">
            <img src="./img/load.gif" class="lazy" imgSrc="./img/${count[i]}.jpg" alt="" />
        </div>
        <div class="introduce">
            <ul>
            <li class="title">${arr[i].title}</li>
            <li class="layout">${arr[i].describe}</li>
            <li class="tally"><p>${arr[i].keywords}</p></li>
            <li class="prices">
                <p class="allprice">${arr[i].allprice}</p>
                <p class="price">${arr[i].price}</p>
            </li>
            </ul>
        </div>
        </div>
        </li>
        `;
    // $('#nav').empty()
    $("#nav").append(str);
  }
}
